<template>
	<view class="fu-p-y-30">
		<demo-desc margin="0 15px 15px">
			此组件选择器用于单列、多列联动的的选择场景。
		</demo-desc>
		
		<fu-cell-group>
			<block v-for="(item,index) in list" :key="index">
				<fu-cell :title="item.name" rightColor="#999999" isLink @click="handleClick(index)"></fu-cell>
			</block>
		</fu-cell-group>
		
		<fu-picker ref="pickerRef1" :columns="columns1" :maskClosable="false"></fu-picker>
		<fu-picker ref="pickerRef2" :columns="columns2" :defaultIndex="[2]" :maskClosable="false"></fu-picker>
		<fu-picker ref="pickerRef3" :columns="columns3" :maskClosable="false" @change="changeHandler3"></fu-picker>
		<fu-picker ref="pickerRef4" :columns="columns4" keyName="name" :maskClosable="false" @change="changeHandler4"></fu-picker>
		<fu-picker ref="pickerRef5" :columns="columns5" :maskClosable="false" title="标题太长就会显示省略..."></fu-picker>
		<fu-picker ref="pickerRef6" :columns="columns6"></fu-picker>
		<fu-picker ref="pickerRef7" :columns="columns7" @change="change">
			<view class="fu-bg-03-02">
				<view class="fu-flex fu-flex-row-between">
					<view class="fu-w-120 fu-text-c fu-l-h-86 fu-color-999999" @click="pickerRef7.close()">关闭</view>
					<view class="fu-w-120 fu-text-c fu-l-h-86" @tap="affirm">确定</view>
				</view>
				<view class="fu-m-x-30">
					<fu-input placeholder="请输入关键词" height="22" shape="circle" prefixIcon="magnifier"></fu-input>
				</view>
			</view>
		</fu-picker>
	</view>
</template>

<script setup>
	import { getCurrentInstance, ref, reactive, computed, onMounted } from 'vue';
	import regions from './regions.json';

	// data数据
	const instance = getCurrentInstance();
	const { $fu } = instance.appContext.config.globalProperties;
	const pickerRef1 = ref();
	const pickerRef2 = ref();
	const pickerRef3 = ref();
	const pickerRef4 = ref();
	const pickerRef5 = ref();
	const pickerRef6 = ref();
	const pickerRef7 = ref();
	const columns1 = reactive([['中国', '美国', '巴西', '日本']]);
	const columns2 = reactive([['中国', '美国', '巴西', '日本']]);
	const columns3 = reactive([
		['中国', '美国'],
		['深圳', '厦门', '上海', '拉萨']
	]);
	const columnData3 = reactive([
		['深圳', '厦门', '上海', '拉萨'],
		['得州', '华盛顿', '纽约', '阿拉斯加']
	]);
	let columns4Data = ref({
		provinces: [], // 省
		citys: [], // 市
		areas: [], // 区
		pickerValue: [0, 0, 0],
		defaultValue: [3442, 1, 2]
	});
	const columns5 = reactive([['中国', '美国', '巴西', '日本']]);
	const columns6 = reactive([['中国', '美国', '巴西', '日本']]);
	const columns7 = reactive([['中国', '美国', '巴西', '日本']]);
	let columns6Index = ref(0);
	const list = ref([
		{ name: '基础案例', pickerRef1 },
		{ name: '设置默认项', pickerRef2 },
		{ name: '多列联动', pickerRef3 },
		{ name: '省市区三级联动', pickerRef4 },
		{ name: '设置标题', pickerRef5 },
		{ name: '允许点击遮罩关闭', pickerRef6 },
		{ name: '插槽自定义工具栏', pickerRef7 }
	]);
	
	// 生命周期
	onMounted(() => {
		getData()
	});
	
	// computed计算属性
	const columns4 = computed(() => {
		return [columns4Data.value.provinces, columns4Data.value.citys, columns4Data.value.areas]
	});
	
	// methods方法
	const handleClick = (e) => {
		list.value[e][`pickerRef${e + 1}`]?.open()
	};
	
	const changeHandler3 = (e) => {
		const {
			columnIndex,
			value,
			values, // values为当前变化列的数组内容
			index,
			indexs,
			// 微信小程序无法将picker实例传出来，只能通过ref操作
			picker = pickerRef3.value
		} = e;
		// 当第一列值发生变化时，变化第二列(后一列)对应的选项
		if (columnIndex === 0) {
			// picker为选择器this实例，变化第二列对应的选项
			picker.setColumnValues(1, columnData3[index])
		}
	};
	
	const changeHandler4 = (e) => {
		const {
			columnIndex,
			value,
			values, // values为当前变化列的数组内容
			index,
			indexs,
			// 微信小程序无法将picker实例传出来，只能通过ref操作
			picker = pickerRef4.value
		} = e;
		if (columnIndex === 0) {
			columns4Data.value.citys = columns4Data.value.provinces[index]?.children || []
			columns4Data.value.areas = columns4Data.value.citys[0]?.children || []
			pickerRef4.value.setIndexs([index, 0, 0],true)
		} else if (columnIndex === 1) {
			columns4Data.value.areas = columns4Data.value.citys[index]?.children || [];
			pickerRef4.value.setIndexs(indexs, true)
		}
	};
	
	const affirm = () => {
		pickerRef6.value.close()
		$fu.toast(`当前确认：${columns6[0][columns6Index.value]}`)
	};
	
	const change = (e) => {
		columns6Index.value = e.index;
	};
	
	const getData = () => {
		columns4Data.value.provinces = regions.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
		handlePickValue()
	};
	
	const handlePickValue = () => {
		// 设置省
		columns4Data.value.pickerValue[0] = columns4Data.value.provinces.findIndex(item => Number(item.id) === columns4Data.value.defaultValue[0]);
		// 设置市
		columns4Data.value.citys = columns4Data.value.provinces[columns4Data.value.pickerValue[0]]?.children || [];
		columns4Data.value.pickerValue[1] = columns4Data.value.citys.findIndex(item => Number(item.id) === columns4Data.value.defaultValue[1]);
		// 设置区
		columns4Data.value.areas = columns4Data.value.citys[columns4Data.value.pickerValue[1]]?.children || [];
		columns4Data.value.pickerValue[2] = columns4Data.value.areas.findIndex(item => Number(item.id) === columns4Data.value.defaultValue[2]);
		// 重置下位置
		pickerRef4.value.setIndexs([columns4Data.value.pickerValue[0], columns4Data.value.pickerValue[1], columns4Data.value.pickerValue[2]], true);
	};
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	
	.picker-box {
		background-color: #f4f4f4;
		margin-top: 10px;
		padding: 10px 20px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>